<template>
  <Card title="水质微生物指标（满意度）">
    <template #content>
      <div class="content" ref="chartContainer"></div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "RightCard2",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

import { getCurrentInstance, onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();

const chartContainer = ref(null);

function initEchart() {
  const chart = proxy.echarts.init(chartContainer.value);
  let data = props.data.goodRateGroupList;
  // 公用调整
  let itemStyle = {
    normal: {
      color: new proxy.echarts.graphic.LinearGradient(1, 0, 0, 0, [
        {
          offset: 0,
          color: "#66BFF5",
        },
        {
          offset: 1,
          color: "#1C48EB",
        },
      ]),
      barBorderRadius: 20,
    },
  };
  const sum = data.reduce(
    (accumulator, currentValue) => accumulator + currentValue.value,
    0
  );
  let option = {
    grid: {
      left: "34%", // 调整左边距
      right: "25%", // 调整右边距
      top: "20%", // 调整顶部边距
      bottom: "20%", // 调整底部边距
    },
    tooltip: {
      show: true,
    },
    legend: {
      show: false,
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        max: 100,
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        data: data,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#3C7CEF",
            fontSize: 14,
          },
          align: "left", // Align the labels to the left
        },
        data: data,
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 10, // Width of the bar
        barGap: "-100%",
        symbol: "fixed",
        showBackground: true,
        backgroundStyle: {
          color: "transparent",
          borderWidth: 2,
          borderColor: "#BBE0EE",
          shadowColor: "#BBE0EE",
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          opacity: 0.9,
        },
        yAxisIndex: 0,
        label: {
          show: true,
          color: "#1C1C1C",
        },
        data: data.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: itemStyle,
          label: {
            show: true,
            position: "left", // Place the label on the right side of the bar
            formatter: "{b}", // Use the data item's name for label content
          },
        })),
      },
    ],
  };
  chart.setOption(option);
  // 为窗口的resize事件绑定处理函数
  window.onresize = function () {
    // 让图表的宽高自适应容器的大小
    chart.resize();
  };
}

onMounted(() => {
  initEchart();
});
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
